<template>
  <view>
    <view class="publishContain defaultMain">
      <myfeedpicture ref="myfeedpicture1" type="submit" @takePic="handlePic" @delPic="delPic" :album-list="takePicList" >
        <view>反馈拍照</view>
      </myfeedpicture>
      <myfeedvideo ref="myfeedvideo1" type="submit" @takeVideo="handleVideo" @delVedio="delVedio" :old-video-list="videoList">
        <view>反馈录像</view>
      </myfeedvideo>
      <!-- 描述 -->
      <view class="desStyle">
        <view style="display: flex;justify-content: space-between;">
          <view style="margin-bottom: 26rpx;">反馈描述</view>
          <!-- <image
            @click="showMap"
            style="width: 50rpx;height: 50rpx;"
            src="/static/img/icons/mark_blue.png"
            mode="scaleToFill"
          /> -->
        </view>

        <u-input
          v-model="fd_description_feed"
          :type="type"
          :border="border"
          :width="width"
          :height="height"
          :auto-height="autoHeight"
          placeholder="请输入反馈描述"
          @blur="handleDesc"
        />
      </view>

      <!-- 提交按钮 -->
      <view class="suishoupaiButton">
        <u-button
          type="primary"
          :ripple="true"
          ripple-bg-color="#74b9ff"
          @click="submitFeedBack"
          >反馈提交</u-button
        >
      </view>
    </view>
    <mapselect
      ref="mapSelect"
      v-show="mapVisible"
      @saveMap="saveMap"
    ></mapselect>
  </view>
</template>
<script>
import myfeedpicture from "../picvideo/picture.vue";
import myfeedvideo from "../picvideo/video.vue";
import mapselect from "../map/map.vue";
import {feedSubmit} from "../../../common/api/suishoupai";

export default {
  name: "feedSubmit",
  props: {
    content_id: {
      type: Number,
      default: 0
    },
    audit_status: {
      type: Number,
      default: 1000
    },
    fd_description: {
      type: String,
      default: ''
    },
    takePicList: {
      type: Array,
      default: []
    },
    videoList: {
      type: Array,
      default: []
    }
  },
  components: {
    mapselect,
    myfeedpicture,
    myfeedvideo,
  },
  mounted() {
    // console.log('feedSubmit mounted----', this.fd_description, this.show_submit_btn)
      try {
        // this.fd_description_feed = uni.getStorageSync('fd_description') ? uni.getStorageSync('fd_description') : this.fd_description
        this.fd_description_feed = this.fd_description
      } catch (err) {

      }

  },
  data() {
    return {
      fd_description_feed: '',
      type: "textarea",
      border: true,
      width: 750,
      height: 150,
      autoHeight: true,
    };
  },
  methods: {
    init () {
      // console.log('feedSubmit init----', this.takePicList, this.videoList)
      this.$refs.myfeedpicture1.$data.takePicList = this.takePicList
      this.$refs.myfeedvideo1.$data.videoList = this.videoList
    },
    handleDesc () {
      uni.setStorageSync('fd_description', this.fd_description_feed)
    },
    handlePic (value) {
      // console.log(value)
      value.forEach(element => {
        this.takePicList.push(element)
      })
      // this.takePicList =
      uni.setStorageSync('feedPicList',this.takePicList)
    },
    delPic (index) {
      this.takePicList.splice(index, 1);
      uni.setStorageSync('feedPicList',this.takePicList)
    },
    handleVideo (value) {
      this.videoList = value
      uni.setStorageSync('feedVideoList',this.videoList)
    },
    delVedio(index) {
      this.videoList.splice(index, 1);
      uni.setStorageSync('feedVideoList',this.videoList)
    },
    reset () {
      uni.showToast({
        title: '上报成功',
        icon: 'success',
        mask: true,
      });
      // 清屏
      this.$refs.myfeedpicture1.init()
      this.$refs.myfeedvideo1.init()
      //  清除缓存
      uni.removeStorageSync('fd_description')
      uni.removeStorageSync('feedPicList')
      uni.removeStorageSync('feedVideoList')
    },
    submitFeedBack() {
      let _self = this
      if (!this.fd_description_feed) {
        uni.showToast({
          title: "请填写反馈描述",
          icon: "error",
          mask: true,
        });
        return;
      }
      const _userInfo = uni.getStorageSync('_userInfo')
      let Data = {
        content_id: this.content_id,
        fd_description: this.fd_description_feed,
        feed_user_id: _userInfo.admin_user_id
      }
      // console.log('debug-------', this.takePicList)
      if (this.takePicList) {
        Data.fd_imgs = this.takePicList.map(element => {
          if(element.hasOwnProperty('result')) {
            return element.result
          }
          return element
        })
      }
      if (this.videoList) {
        Data.fd_videos = this.videoList.map(element =>{
          if(element.hasOwnProperty('result')) {
            return element.result
          }
          return element
        })
      }
      // console.log('feedSubmit++++++++',Data)
        uni.showLoading({
          title: '提交中',
          mask: true
        });
        feedSubmit(Data).then(res => {
          uni.hideLoading()
          _self.reset()
          setTimeout(()=>{
            uni.navigateBack({
              delta: 2
            });
          },1000)
        })
    },
  },
};
</script>
<style lang="scss" scoped>
.publishContain {
  padding: 0 0 100rpx;
  background-color: #fff;
}
/deep/ .paiTitle .u-field {
  padding: 0 0 0 14rpx;
}
.desStyle {
  padding: 20rpx;
  background-color: #fff;
}
.suishoupaiButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 148rpx;
  box-sizing: border-box;
  padding: 0 30rpx;
  position: fixed;
  background-color: #ffffff;
  bottom: 0;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  z-index: 999;
}
.suishoupaiButton u-button {
  width: 100%;
  border-radius: 10rpx;
}
</style>
